<template>
    <div style="margin-left: 300px;margin-right: 200px">
        <h1>推荐的工具网站</h1>
        <el-row>
            <el-col v-for="(item, index) in webInfo" :key="index" :span="3" class="card-div1" @click="openUrl(index)">
                <el-card style="border-radius: 20px" :rel="item.url">
                    <img :src="item.icon" class="image" alt="">
                    <div style="padding: 14px;font-weight: bold">
                        <span>{{ item.name }}</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: "WebsiteCard",
    data() {
        return {
            webInfo: [
                {
                    name: 'GitMind',
                    icon: '/static/website/GitMind.svg',
                    url: 'https://gitmind.cn/app/new'
                },
                {
                    name: 'Gitee',
                    icon: '/static/website/gitee.svg',
                    url: 'https://gitee.com/'
                },
                {
                    name: 'Github',
                    icon: '/static/website/github.svg',
                    url: 'https://github.com/'
                },
                {
                    name: 'GitMind',
                    icon: '/static/website/GitMind.svg',
                    url: 'https://gitmind.cn/app/new'
                },
                {
                    name: 'Gitee',
                    icon: '/static/website/gitee.svg',
                    url: 'https://gitee.com/'
                },
                {
                    name: 'Github',
                    icon: '/static/website/github.svg',
                    url: 'https://github.com/'
                },
                {
                    name: 'Github',
                    icon: '/static/website/github.svg',
                    url: 'https://github.com/'
                },
                {
                    name: 'GitMind',
                    icon: '/static/website/GitMind.svg',
                    url: 'https://gitmind.cn/app/new'
                },
                {
                    name: 'Gitee',
                    icon: '/static/website/gitee.svg',
                    url: 'https://gitee.com/'
                },
                {
                    name: 'Github',
                    icon: '/static/website/github.svg',
                    url: 'https://github.com/'
                }
            ]
        }
    },
    methods: {
        openUrl(index) {
            window.open(this.webInfo[index].url)
        }
    }
}
</script>

<style scoped>
.image {
    height: 80px;
    width: 80px;
}

.card-div1 {
    width: 200px;
    cursor: pointer;
    margin: 60px 40px 60px 40px;
}

.card-div2 {
    width: 200px;
    cursor: pointer;
    margin: 40px 0px 100px 60px;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>